<template>
	<div class="setUp navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<div class="setUp_item">
			<span>头像</span>
			<div>
				<div>
					<input accept="image/*" @change="upload($event)" type="file">
					<img v-if="user_info.avatar == '/static/wap/images/index/logo.png' || !user_info" class="uct_left" src="../../assets/user/user_head.png"
					 alt="">
					<img class="head" v-else :src="'http://www.facai888008.cn/' + zhanshi_head" alt="">
				</div>
				<img class="go" src="../../assets/user/go.png" alt="">
			</div>
		</div>
		<div class="setUp_item">
			<span>昵称</span>
			<div>
				<input class="nick_name" type="text" v-model="zhanshi_nickname">
				<img class="go" src="../../assets/user/go.png" alt="">
			</div>
		</div>

		<button class="sp_con" @click="confirm">确认修改</button>
	</div>
</template>

<script>
	export default {
		name: "setUp",
		async created() {

			if (!this.$store.state.user_info) {

				try {

					const data = await this.$apis.User.xinxi()

					this.user_info = data.data

					this.$store.state.user_info = data.data

					this.zhanshi_head = data.data.avatar

					this.zhanshi_nickname = data.data.user_login

				} catch (e) {
					//TODO handle the exception
				}

			} else {

				this.user_info = this.$store.state.user_info

				this.zhanshi_head = this.user_info.avatar

				this.zhanshi_nickname = this.user_info.user_login
			}
		},
		data() {

			return {

				user_info: "",

				// 头像
				zhanshi_head: "",

				zhanshi_nickname: ""

			}

		},
		methods: {
			// 确认修改
			async confirm() {

				let post_data = {

					nickname: this.zhanshi_nickname,

					avatar: this.zhanshi_head

				}

				try {

					const data = await this.$apis.User.editinfo(post_data)

					this.$toast.success(data.msg)
					
					this.$store.state.user_info.user_login = this.zhanshi_nickname
					
					this.$store.state.user_info.avatar = this.zhanshi_head
					
					setTimeout( ()=> {
						this.$router.push("/user")
					},1000)

				} catch (e) {
					//TODO handle the exception
					this.$toast.fail(e.msg)
				}

			},

			// 上传图片
			async upload(e) {

				this.$toast.loading({
					message: '上传中...',
					forbidClick: true,
					duration: 0
				});

				let img = e.target.files[0]

				let post_data = new FormData()

				post_data.append("file", img)

				try {

					const data = await this.$apis.User.uploadImg(post_data)

					console.log(data)

					this.$toast.success(data.msg)

					this.zhanshi_head = data.info


				} catch (e) {
					//TODO handle the exception
					this.$toast.fail(e.msg)
				}

			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';

	.setUp {

		.sp_con {
			display: block;
			width: 5.58rem;
			height: .78rem;
			box-shadow: inset 0px 0px .3rem 0px rgba(28, 176, 212, 1);
			opacity: 0.9;
			border-radius: .2rem;
			font-size: .28rem;
			color: #94E9FF;
			border: none;
			outline: none;
			background-color: transparent;
			margin: auto;
			margin-top: 3rem;
		}

		.setUp_item {
			padding: .3rem .4rem;
			box-sizing: border-box;
			color: #94E9FF;
			font-size: .28rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #1A304F;

			.head {
				width: 1rem;
				height: 1rem;
				border-radius: 50%;
			}

			div {
				display: flex;
				align-items: center;

				.go {
					margin-left: .3rem;
				}

				>div {
					position: relative;
					width: 1rem;
					height: 1rem;

					input {
						position: absolute;
						width: 100%;
						height: 100%;
						opacity: 0;
						left: 0;
						top: 0;
					}
				}
			}

			.nick_name {
				text-align: right;
				border: none;
				outline: none;
			}
		}

		.setUp_item:last-child {
			border: none;
		}

	}
</style>
